<template>
  <div>
  	<el-dialog title="批量添加库存" :visible.sync="addVisible" width="50%" :before-close="closeAddMethod" @open="opendEnd">
      <el-row v-for="(stockEntity,index) in stockList" :key="index" style="margin-bottom: 20px;">
        <el-form :model="stockEntity" :ref="'batchStock'+index" label-width="100px" style="display: flex;justify-content: space-around;">
          <el-form-item :label="'选择商品'+(index+1)" prop="goodsId" :rules="[
               { required: true, message: '请选择商品', trigger:'blur'},
             ]" style="margin-bottom: 0;">
                <el-select v-model.trim="stockEntity.goodsId" placeholder="请选择商品">
                  <el-option
                    v-for="item in goodsList"
                    :key="item.goodsId"
                    :label="item.goodsName"
                    :value="item.goodsId" >
                  </el-option>
                </el-select>
          </el-form-item>
          <el-form-item  :label="'所需库存量'" prop="stockNum" :rules="[
                { required: true, message: '请输入库存数', trigger: 'blur' },
              ]"  style="margin-bottom: 0;">
            <template>
              <el-input-number v-model.trim="stockEntity.stockNum" controls-position="right" :min="0" :max="20"></el-input-number>
            </template>
          </el-form-item>
          <el-button type="danger" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="delIndexRow(index)"></el-button>
        </el-form>
      </el-row>
  		<span slot="footer" class="dialog-footer">
        <el-button type="success" @click="addDataRow">新 增</el-button>
  			<el-button @click="closeAddMethod">取 消</el-button>
  			<el-button type="primary" @click="rulesCheck('batchStock')">确 定</el-button>
  		</span>
  	</el-dialog>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
  	name: "",
  	props: ["addVisible","addOptions"],
  	data() {
  		return {
        //数据框内容
  			stockEntity: {
  				goodsId:"",
          stockNum:0
  			},
        stockList:[
          {
            goodsId:"",
            stockNum:0,
          },
        ],
        goodsList:[],

        index:1
  		}
  	},
  	methods: {
      //设置关闭添加页面方法
      closeAddMethod() {
          this.clearData()
      		this.$parent.addVisible = false
      },
      //需要等待dialog 打开完毕后 在金数据渲染
      //设置权限下拉框的默认值
      opendEnd(){
        //渲染商品下拉框数据
        this.goodsList = this.$props.addOptions
      },
      ////清除文本框数据，返回相对应文本框的值
      clearData(){
          this.stockEntity={
            goodsId:"",
            stockNum:0
          }
          this.stockList=[
            {
              goodsId:"",
              stockNum:0,
            },
          ],
          this.opendEnd()
      },

      //新增一行表单方法
      addDataRow(){
        if (this.stockList.length >= 5) {
          this.$message.warning('最多只能添加5行')
          // 如果需要更多行，可以调整[dialog-content]的高度，或者将界面调整为允许滚动
          return
        }
        this.stockList.push({
            goodsId:"",
            stockNum:0,
        })
      },
      //删除指定index表单方法
      delIndexRow(index){
        if(this.stockList.length <= 1){
          this.$message.warning('你还用啥')
          return
        }
        this.stockList.splice(index, 1)
      },

      rulesCheck(params){
        // console.log(params)
        let count = this.stockList.length
        for(var index in this.stockList){
          var stockEntity = this.stockList[index]
          // console.log(stockEntity)
          // console.log(JSON.stringify(stockEntity))
          this.$refs[params+index][0].validate((valid,obj) => {
            if (valid) {
              if (count-- === 1) {
                this.batchStock()
              }
            }else{
              return false
            }
          });
        }
      },

      batchStock() {
        console.log(JSON.stringify(this.stockList))
        var self = this
        var onlineManager = JSON.stringify(sessionStorage.getItem("manager"))
        //是否允许执行查询方法
          self.$http({
            url: "/api/CakeShop/addGoodsStock",
            method: "post",
            headers: {
              'token': onlineManager.token,
              'Content-Type': 'application/json'
            },
            data: JSON.stringify(self.stockList)
          }).then(function(res) {
            console.log(res)
            if (res.data.code==200) {
              self.$message({
                message: res.data.msg,
                type: 'success',
                onClose: function() {
                  //关闭修改界面
                  self.closeAddMethod()
                  //添加完数据返回首页
                  self.$parent.queryStockList(sessionStorage.getItem("page"))
                }
              });
            }else{
              self.$message({
                message: res.data.msg,
                type: 'error'
              });
            }
          })
      }
    },
  }
</script>

<style>
</style>
